import { useContext, useEffect } from "react";
import { ActionBar, Grid } from "react-vant";
import { WapHomeO, ShoppingCartO, AppsO, Manager } from '@react-vant/icons';
import { useNavigate } from "react-router-dom";
import { myContext } from '../../context';
import './index.css'
import axios from "../../utils/axios";
//less 和 less-loader 都要安装！！
// 调出默认的 webpack 配置：
const BottomNavBar = () => {
  const navigate = useNavigate();

  const { shoppingCartConent, updateShoppingCartConent } = useContext(myContext);
  const getShoppingCartCount = () => {
    axios.get('/api/v1/shop-cart').then(res => {
      if (res.data.message === 'SUCCESS') {
        //如果是 SUCCESS， 就说明 aixos 成功，
        // 应该在 axios里面去设置一个相应拦截？？？？
        updateShoppingCartConent(res.data.data)
      }
    })
  }
  useEffect(()=>{
    getShoppingCartCount();
  },[])
  return (
    <div className="bottomNavBarPage">
      <ActionBar className='buttomNavBar'>
        {/* 如果被点击了，颜色才设置为：#1baeae！！！ */}
        <ActionBar.Icon
          icon={<WapHomeO color="#1baeae" />}
          text='首页'
          onClick={() => navigate('/')}
        ></ActionBar.Icon>
        <ActionBar.Icon
          icon={<AppsO />}
          text='分类'
          onClick={() => navigate('/category')}
        />
        <ActionBar.Icon
          icon={<ShoppingCartO />}
          badge={{ content: shoppingCartConent.length > 0 && shoppingCartConent.length }}
          text='购物车'
          onClick={() => navigate('/shoppingCart')}
        />
        <ActionBar.Icon
          icon={<Manager />}
          text='我的'
          onClick={() => navigate('/personalCenter')}
        />
      </ActionBar>
    </div>
  )
}

export default BottomNavBar;